import React from 'react';
import {
  Table,
  Icon,
  Button,
  Tooltip,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Cascader,
  Radio,
  Dropdown,
  Menu,
  Checkbox,
  Steps,
  Modal,
  Form,
  Pagination,
  Popconfirm,
  Timeline,
  Tabs,
  Card
} from 'antd';
import MyIcon from '../components/common/MyIcon/MyIcon';
import CheckBox from 'CheckBox'; //自定义 多选框
import Immutable from 'immutable';

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const FormItem = Form.Item;
const {MonthPicker, RangePicker} = DatePicker;//日历
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;




export default class Set extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ModalEdit: false,
    };
  }
  showModalEdit(ModalEdit) {
    this.setState({ModalEdit});
  }
  render() {
    let data_leixing = [
      {
        text: '选择项',
        state: true,
      }, {
        text: '输入框',
        state: '',
      }, {
        text: '文本框',
        state: '',
      }
    ];
    return (
      <div>
        <h3 className="title-h3">选项设置</h3>
        <Tabs defaultActiveKey="1">
          <TabPane tab="月嫂" key="1">
            <div className="page-card">
              <Card title="基本信息" noHovering extra={<Button type="primary">新增选项</Button>}>
                <div className="add-cont">
                  <div className="hover-content">
                    <Row gutter={16}>
                      <Col span={3} className="text-r">
                        <div className="ant-form-item-label">
                          <label><span className="span-left">新生儿护理</span></label>
                        </div>
                      </Col>
                      <Col span={19}>
                        <div className="btn-add-cont">
                          <div className="btn-hover">
                            <Button type="primary">新生儿按摩</Button>
                            <div className="btn-hover-cont">
                              <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                              <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                            </div>
                          </div>
                          <div className="btn-hover">
                            <Button type="primary">新生儿按摩</Button>
                            <div className="btn-hover-cont">
                              <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                              <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                            </div>
                          </div>
                          <div className="btn-hover">
                            <Button type="primary">新生儿按摩</Button>
                            <div className="btn-hover-cont">
                              <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                              <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                            </div>
                          </div>
                          <div className="btn-hover">
                            <Button type="primary">新生儿按摩</Button>
                            <div className="btn-hover-cont">
                              <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                              <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                            </div>
                          </div>
                          <Button className="ant-btn-info" type=""><Icon type="plus" />新增选项值</Button>
                        </div>
                      </Col>
                    </Row>
                    <div className="hover-content-caozuo">
                      <span title="编辑选项" className="caozuo-blue" onClick={() => this.showModalEdit(true)}><Icon type="edit"/></span>
                      <span title="删除选项" className="caozuo-red"><Icon type="delete"/></span>
                    </div>
                  </div>
                  <div className="hover-content">
                    <Row gutter={16}>
                      <Col span={3} className="text-r">
                        <div className="ant-form-item-label">
                          <label><span className="span-left">现居地址</span></label>
                        </div>
                      </Col>
                      <Col span={5}>
                        <div className="ant-form-item-control">
                          <Input size="large" placeholder="请输入现居地址"/>
                        </div>
                      </Col>
                    </Row>
                    <div className="hover-content-caozuo">
                      <span title="编辑选项" className="caozuo-blue" onClick={() => this.showModalEdit(true)}><Icon type="edit"/></span>
                      <span title="删除选项" className="caozuo-red"><Icon type="delete"/></span>
                    </div>
                  </div>
                  <div className="hover-content">
                    <Row gutter={16}>
                    <Col span={3} className="text-r">
                      <div className="ant-form-item-label">
                        <label><span className="span-left">备注信息</span></label>
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="ant-form-item-control">
                        <div className="textarea-surplus">
                          <Input type="textarea" rows={6} placeholder="请输入其他 雇主和订单相关备注信息"/>
                          <p>还可以输入140字</p>
                        </div>
                      </div>
                    </Col>
                  </Row>
                    <div className="hover-content-caozuo">
                      <span title="编辑选项" className="caozuo-blue" onClick={() => this.showModalEdit(true)}><Icon type="edit"/></span>
                      <span title="删除选项" className="caozuo-red"><Icon type="delete"/></span>
                    </div>
                  </div>
                </div>
              </Card>
              <Card title="其他信息" noHovering extra={<Button type="primary">新增选项</Button>}>
                <div className="empty">
                  <h4>
                    <MyIcon type="empty"/>
                    暂无自定义字段
                  </h4>
                </div>
              </Card>
              <Card title="求职信息" noHovering extra={<Button type="primary">新增选项</Button>}>
                <div className="empty">
                  <h4>
                    <MyIcon type="empty"/>
                    暂无自定义字段
                  </h4>
                </div>
              </Card>
            </div>
          </TabPane>
          <TabPane tab="客户" key="2">

          </TabPane>
        </Tabs>
        <Modal
          title="编辑选项"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalEdit}
          onCancel={() => this.showModalEdit(false)}
          okText="保存"
          cancelText="取消"
        >
          <div className="add-cont">
            <Row gutter={16}>
              <Col span={5} className="text-r">
                <div className="ant-form-item-label">
                  <label>选项名称</label>
                </div>
              </Col>
              <Col span={10}>
                <Input size="large" value="" placeholder="请输入选项名称"/>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={5} className="text-r">
                <div className="ant-form-item-label">
                  <label>选项类型</label>
                </div>
              </Col>
              <Col span={19}>
                <CheckBox data={Immutable.fromJS(data_leixing)}></CheckBox>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={5} className="text-r">
                <div className="ant-form-item-label">
                  <label>可否多选</label>
                </div>
              </Col>
              <Col span={10}>
                {/*<Switch checkedChildren="是" unCheckedChildren="否" defaultChecked/>*/}
                <div className="ant-form-item-control">
                  <RadioGroup onChange={this.onChangeRadio} valueRadio={this.state.valueRadio}>
                    <Radio value={1}>单选</Radio>
                    <Radio value={2}>多选</Radio>
                  </RadioGroup>
                </div>
              </Col>
            </Row>
          </div>
        </Modal>
      </div>
    )
  }
}
